<template>
  <div class="boxs">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>
        <!-- 自己封装的工具栏组件 -->
        <!-- <ElTools> -->
        <!-- <el-tools> -->
        <PageTools>
          <template #left>
            <span>总记录数：100条</span>
          </template>
          <template #right>
            <el-button type="warning" @click="$router.push('/import')">导入excle</el-button>
            <el-button type="danger" @click="exportData">导出excle</el-button>
            <el-button v-if="checkPermission('p-em-add')" type="primary" @click="show=true">新增员工</el-button>
          </template>
        </PageTools>
        <!-- </el-tools> -->
        <!-- </ElTools> -->
      </template>
      <!-- card body -->
      页面内容
      <!-- table列表 -->
      <el-table border :data="list">
        <el-table-column type="index" label="序号" />
        <el-table-column label="头像" prop="staffPhoto">
          <template #default="{ row }">
            <img
              class="staff"
              :src="row.staffPhoto"
              @click="clickShowCodeDialog(row.staffPhoto)"
            >
          </template>
        </el-table-column>
        <el-table-column prop="username" label="姓名" />
        <el-table-column prop="workNumber" label="工号" />
        <el-table-column prop="formOfEmployment" label="聘用形式">
          <template #default="{row}">
            {{ _formatEmployment(row.formOfEmployment) }}
          </template>
        </el-table-column>
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="timeOfEntry" label="入职时间">
          <template #default="{row}">
            {{ formatTime(row.timeOfEntry) }}
          </template>
        </el-table-column>
        <el-table-column label="账户状态">
          <el-switch v-model="qy" />
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="280">
          <template #default="{row}">
            <el-button type="text" size="small" @click="goDetail(row.id)">查看</el-button>
            <el-button type="text" size="small" @click="openAssign(row.id)">分配角色</el-button>
            <el-button type="text" size="small" @click="hDelEmployee(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :current-page="params.page"
          :page-size="params.size"
          :page-sizes="[10, 2]"
          @current-change="changePage"
          @size-change="sizeChange"
        />
      </el-row>
      <!-- 二维码弹层 -->
      <el-dialog
        width="300px"
        title="二维码"
        :visible="showCodeDialog"
        @close="showCodeDialog = false"
      >
        <el-row type="flex" justify="center">
          <canvas ref="myCanvas" />
        </el-row>
      </el-dialog>
    </el-card>
    <!-- 新增员工弹层 -->
    <AddEmploy :show="show" @close="show = false" />
    <!-- 给员工分配角色弹层 -->
    <AssignRole ref="roles" :show-role-dialog.sync="showRoleDialog" />

  </div>
</template>

<script>
// import PageTools from '@/components/PageTools'
// 获取员工列表 获取删除接口
import { getEmployeeList, delEmployee } from '@/api/employees'
// 引入格式化文档
import EmployeeEnum from '@/api/constant/employees'
import dayjs from 'dayjs'
// 导入新增员工的弹层
import AddEmploy from './components/add-employee.vue'
// 引入导出格式化方法
import { transformTdata } from '@/utils'
// 引入转换二维码的包
import QrCode from 'qrcode'
// 导入给员工分配角色组件
import AssignRole from './components/assign-role.vue'
export default {
  name: 'Employees',
  components: {
    // PageTools
    AddEmploy,
    AssignRole
  },
  data() {
    return {
      showRoleDialog: false,
      // 控制弹层显示和隐藏
      showCodeDialog: false,
      // 导出loading效果
      downloadLoading: false,
      EmployeeEnum,
      // 控制新增员工弹层显隐
      show: false,
      // 获取到的数据
      list: [],
      // 账户状态
      qy: false,
      params: {
        // 当前页
        page: 1,
        // 每页条数
        size: 10
      },
      total: 0 // 总数
    }
  },
  created() {
    // 创建前生命周期获取
    this.getEmployeeList()
  },
  methods: {
    // 导出员工信息=》下载到本地电脑
    exportData() {
      // 开启加载，避免导出时重复操作
      this.downloadLoading = true
      // import('@/utils/Export2Excel') 异步懒加载模块
      // 因为：excel导出代码量比较大而且功能使用频率不高，
      // 所以采用懒加载方式，点击使用的时候采取加载这个模块
      import('@/utils/Export2Excel').then(excel => {
        // 导出数据key对应关系
        const headerShips = {
          '手机号': 'mobile',
          '姓名': 'username',
          '入职日期': 'timeOfEntry',
          '聘用形式': 'formOfEmployment',
          '工号': 'workNumber',
          '转正日期': 'correctionTime',
          '部门': 'departmentName'
        }
        // 1. 表头
        const header = Object.keys(headerShips)
        // 2. 导出数据项
        const exportHeader = Object.values(headerShips)
        // 3. 表头对应数据（二维数组）
        const data = transformTdata(this.list, exportHeader)
        // // 核心：准备excel表头和数据
        // const tHeader = ['姓名', '性别', '期望薪资']
        // // 说明❓：二维数据
        // const data = [
        //   ['曹仁堂', '男', 18000],
        //   ['王晓阳', '男', 18000],
        //   ['杨瑭瑭', '女', 19000]
        // ]
        // == 使用excel.export_json_to_excel 方法实现导出 ==
        excel.export_json_to_excel({
          header: header, // excel文件表头
          data, // 导出excel数据
          filename: `员工信息-${Math.random()}`, // 下载保存到本地电脑excel文件名
          autoWidth: true, // 单元格自适应
          bookType: 'xlsx' // 导出文件格式
        })
        // 关闭加载效果在下载成功之后
        this.downloadLoading = false
      })
    },
    // 获取员工信息方法
    async getEmployeeList() {
      const data = await getEmployeeList(this.params)
      console.log('获取到的数据：', data)
      const { total, rows } = data
      this.total = total
      this.list = rows
    },
    // 页码切换
    changePage(newPage) {
      this.params.page = newPage
      this.getEmployeeList()
    }, // 每页显示条数切换
    sizeChange(size) {
      this.params.size = size
      this.getEmployeeList()
    },
    // 定义格式化数据方法
    // 格式化聘用形式函数
    _formatEmployment(type) {
      // 经过对源数据处理之后 返回处理之后的数据
      // 格式化逻辑
      const hireType = EmployeeEnum.hireType
      // type 1/2
      // {1:'正式', 2:'非正式'}
      // 枚举静态数据 尽量定义成对象  因为对象天生具有一一对应的属性
      const map = {}
      hireType.forEach(item => {
        map[item.id] = item.value
      })
      return map[type]
    },
    // 时间格式化
    formatTime(timeOfEntry) {
      return dayjs(timeOfEntry).format('YYYY-MM-DD')
    },
    // 删除方法
    async hDelEmployee(id) {
      this.$confirm('你确认要删除么?', '温馨提示').then(async() => {
        await delEmployee(id)
        // 解决删除最后一页数据页码正确，数据显示错误问题
        const newPage = Math.ceil((this.total - 1) / this.params.size) // 总页数
        if (this.params.page > newPage) {
          // 不正确修复，重新赋值
          this.query.page = newPage
        }
        this.$message.success('删除员工成功')

        this.getEmployeeList()
      }).catch(error => {
        console.log(error)
      })
    },
    goDetail(id) {
      this.$router.push({
        path: `/employees/detail/${id}`
      })
    },
    // 头像弹层显隐
    clickShowCodeDialog(url) {
      if (!url) return // 有图片才显示弹层
      this.showCodeDialog = true
      this.$nextTick(() => {
        // 如果这里 url 写的是网址, 就会跳转到对应网址 (二维码分享效果)
        QrCode.toCanvas(this.$refs.myCanvas, url)
      })
    },
    // 打开员工分配角色弹层
    /**
     * id 员工ID
     */
    openAssign(id) {
      // 打开弹层
      this.showRoleDialog = true
      // 调用分配角色子组件方法=》数据回填
      // this.$refs.roles === 等价于 分配角色子组件 this
      this.$refs.roles.getRolesById(id)
    }
  }
}
</script>

<style scoped >
.staff{
  height: 80px;
  width: 80px;
  border-radius: 100%;
}
</style>
